import React from 'react'
import * as echarts from 'echarts/core';
import { Grid3DComponent } from 'echarts-gl/components';
import { TooltipComponent, VisualMapComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { SurfaceChart } from 'echarts-gl/charts';
import { connect } from 'react-redux';
import { withRouter,Link } from 'react-router-dom';
import '../index.css'
echarts.use([
  TooltipComponent,
  VisualMapComponent,
  Grid3DComponent,
  SurfaceChart,
  CanvasRenderer
]);
class SvCurve extends React.Component {
  constructor(props){
        super(props);
        this.state={
            
        };
        // this.indicator = []
  }
  componentDidUpdate() {
    const data = this.props.svCurveData;
      
    // console.log(data.linkedHashMaps[0].value);
    var myChart = echarts.init(document.getElementById('svCurve'));
    myChart.setOption({
        title:{
          text:'腐蚀速率'
        },
        visualMap: {
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          },
          show:true,
          dimension:0,//按照x轴渐变
        },
        xAxis3D: {
          type: 'value',
          name: '轴向',
        },
        yAxis3D: {
          type: 'value',
          name: '周向',
        },
        zAxis3D: {
          type: 'value',
          name: 'z',
        },
        grid3D: {},
        series: [{
          type:'surface',
          wireframe: {
              show: false
          },
          data: data.linkedHashMaps[0].value || []
        }]
    })
  }
  
  onChartClick(param,echarts){
        console.log(param)
  }
  

  render(){  
    const { width, height } = this.props;
    return (
      <div className={this.props.choice !== 'all' ? 'curveContent' : ''}>
        <div id='svCurve' style={{width: width, height: height}}></div>
      </div>
      
    )
  }
}

const mapStateToProps = (state) => ({ svCurveData:state.equipmentPage.svCurveData,width:state.equipmentPage.width,height:state.equipmentPage.height});
const mapDispatchToProps = dispatch => {
  return {
    getBackImg: dispatch.equipmentPage.getBackImg,
    getCurve: dispatch.equipmentPage.getCurve,
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(SvCurve));